<template>
  <div id="app">
    <Topbar></Topbar>
    <Header></Header>
    <router-view />
    <Login></Login>
    <transition name="slide">
      <Toast v-show="status"></Toast>
    </transition>
    <Footer></Footer>
  </div>
</template>
<script>
import Header from "./components/Header";
import Topbar from "./components/Topbar";
import Footer from "./components/Footer";
import Login from "./components/Login";
import Toast from "./components/Toast";
import { mapState } from "vuex";

export default {
  name: "App",
  components: {
    Header,
    Topbar,
    Footer,
    Login,
    Toast,
  },
  computed: {
    ...mapState("showToast", ["status"]),
  },
};
</script>
<style>
/* 入场的起始状态 = 离场的结束状态 */
.slide-enter,
.slide-leave-to {
  opacity: 0;
}

.slide-enter-active,
.slide-leave-active {
  transition: opacity 0.3s linear;
}

.slide-enter-to,
.slide-leave {
  opacity: 1;
}
</style>
